<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pro{
            background-color: gray;
            width: 200px;
            height: 200px;
            display: inline-block;
            margin-left: 100px;
            margin-top: 50px;

        }
        .full{
            width: 100%;
            height: 100%;
            background-color: yellow;
            opacity: 0.7;
            text-align: center;
            line-height: 200px;
            color: black;
        }
        
        .pro1{
            transform: translate(30px,30px);
        }
        .pro2{
            transform: skew(30deg);
        }
        .pro3{
            transform: scale(0.8,1.3);
        }
        .pro4{
            transform: rotate(45deg);
        }
        /* -------------- */
        .con{
            width: 400px;
            height: 400px;
            margin: auto;
            margin-top: 20px;
            border: black 5px solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .revolution{
            transform-style: preserve-3d;
            margin: auto;
            width: 100px;
            height: 100px;
            border: 1px red solid; 
            position: relative;  
            animation: revolution 4s linear infinite;
        }
        .revolution div{
            position: absolute;
            width: 100px;
            height: 100px;
            border: black 2px solid;
        }
        .revolution div img{
            width: 100px;
            height: 100px;
        }
        .t1{
            transform: translate(0px,100px);
        }
        .t2{
            transform: translate(0px,-100px);
        }
        .t3{
            transform: translate(100px,0px);
        }
        .t4{
            transform: translate(-100px,0px);
        }
        @keyframes revolution{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /* ------------- */
        .big{
            height: 300px;
        }
        .circle{
         
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 50%;
            animation: circle 3s linear infinite;
        }
        @keyframes circle{
            0%{
                opacity: 1;
            }
            15%{
                width: 80px;
                height: 80px;
                transform: translate(200px);
                opacity: 0.8; 
            }
            30%{
                width: 60px;
                height: 60px;
                transform: translate(300px);
                opacity: 0.6;
            }
            50%{
                width: 30px;
                height: 30px;
                opacity: 0.3;
                transform: translate(500px);
            }
            75%{
                width: 60px;
                height: 60px;
                opacity: 0.6;
                transform: translate(600px);
            }
            85%{
                width: 80px;
                height: 80px;
                opacity: 0.8;
                transform: translate(800px);
            }
            100%{
                width: 100px;
                height: 100px;
                opacity: 1;
                transform: translate(1200px);
            }
        }
        .b{
            background-color: red;
        }
        .c{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">2D探究过程</h1>
    <div class="pro">
        <div class="pro1 full">translate</div>
    </div>
    <div class="pro">
        <div class="pro2 full">skew</div>
    </div>
    <div class="pro">
        <div class="pro3 full">scale</div>
    </div>
    <div class="pro">
        <div class="pro4 full">rotate</div>
    </div>
    <hr style="margin-top: 50px;">
    <h1 style="text-align: center;">3D探究过程</h1>
    <div class="con">
        <div class="revolution">
            <div class="t1"><img src="./image/w1.webp" alt=""></div>
            <div class="t2"><img src="./image/w2.webp" alt=""></div>
            <div class="t3"><img src="./image/w5.webp" alt=""></div>
            <div class="t4"><img src="./image/铁路.jpg" alt=""></div>
            <div class="t5"><img src="./image/道路.jpeg" alt=""></div>
        </div>
    </div>
    <hr style="margin: 50px;">
    <h1 style="text-align: center;">动画探究过程</h1>
    <div class="big">
        <div class="circle"></div>
        <div class="circle b"></div>
        <div class="circle c"></div>
    </div>
</body>
</html>